{%extends 'dbmp_base.html' %}

{% load staticfiles %}
{% load ip_filters %}

<!-- 添加该页面自己需要的 css 模板 -->
{% block css %}
    <link href="{% static 'css/plugins/sweetalert/sweetalert.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/bootstrapvalidator/bootstrapValidator.min.css' %}" rel="stylesheet">
{% endblock %}

{% block app_title %}MySQL实例添加{% endblock %}

<!-- 其他元素模块 -->
{% block top_element %}
<div class="row">
    <div class="col-md-5">
        <div class="row fontawesome-icon-list">
            <!-- 添加返回首页按钮 -->
            <div class="fa-hover col-md-4">
                <a href="{{ request.environ.HTTP_REFERER }}">
                    <i class="fa fa-reply"></i>
                    返回
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="row fontawesome-icon-list">
            <!-- 添加返回MySQL实例列表按钮 -->
            <div class="fa-hover  col-md-4">
                <a href="{% url 'dbmp_mysql_instance_index' %}">
                    <i class="fa fa-home"></i>
                    实例列表
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

<!-- 显示该页面主要展示的内容 -->
{% block content %}
<!-- OS 信息 -->
<section id="os_section">
    <h2 class="page-header">操作系统信息</h2>
    <div id="os_row" class="row">
        <div id="chostname" class="col-md-4">
            <strong>主机名：</strong> 
        </div>
        <div id="cip" class="col-md-4">
            <strong>IP地址：</strong> 
        </div>
        <div id="calias" class="col-md-4">
            <strong>别名：</strong> 
        </div>
    </div>

    <h4>&nbsp;</h4>
    
    <div class="row">
        <div class="col-md-3">
            <a id="os_list"><i class="fa fa-object-ungroup"></i>
                选择OS
            </a>
        </div>
    </div>
<section>

<section id="mysql_instance">
    <h2 class="page-header">MySQL实例信息</h2>

    <form method="post" action="{% url 'dbmp_mysql_instance_add' %}" class="form-horizontal m-t" id="default_form">
        {% csrf_token %}
        <input id="cos_id" name="os_id" type="hidden" />
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                链接 IP：
            </label>
            <div class="col-sm-8">
                <input id="chost" name="host" type="text" class="form-control"
                       value="{% if form.host.value %}{{ form.host.value }}{% endif %}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                端口：
            </label>
            <div class="col-sm-8">
                <input id="cport" name="port" type="number" class="form-control"
                       value="{% if form.port.value %}{{ form.port.value }}{% endif %}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                用户名：
            </label>
            <div class="col-sm-8">
                <input id="cusername" name="username" 
                       type="text" class="form-control" maxlength="50"
                       value="{% if form.username.value %}{{ form.username.value }}{% endif %}">
                <span class="help-block m-b-none">
                     <i class="fa fa-info-circle text-success"></i> 
                     该用户应该具备基本的管理MySQL权限(启动，关闭 等等)
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                密码：
            </label>
            <div class="col-sm-8">
                <input id="cpassword" name="password" 
                       type="text" class="form-control" maxlength="200"
                       value="{% if form.password.value %}{{ form.password.value }}{% endif %}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                备注：
            </label>
            <div class="col-sm-8">
                <textarea id="cremark" name="remark" type="text" class="form-control">{% if form.remark.value %}{{ form.remark.value }}{% endif %}</textarea>
            </div>
        </div>

        <hr /> 
        
        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                配置文件路径：
            </label>
            <div class="col-sm-8">
                <input id="dmy_cnf_path" name="my_cnf_path" 
                       type="text" class="form-control" maxlength="200"
                       value="{% if form.my_cnf_path.value %}{{ form.my_cnf_path.value }}{% endif %}">
                <span class="help-block m-b-none">
                    <i class="fa fa-info-circle text-success"></i> 
                    如：/etc/my.cnf，/etc/my_3306.cnf
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                MySQL软件目录：
            </label>
            <div class="col-sm-8">
                <input id="dbase_dir" name="base_dir" 
                       type="text" class="form-control" maxlength="200"
                       value="{% if form.base_dir.value %}{{ form.base_dir.value }}{% endif %}">
                <span class="help-block m-b-none">
                    <i class="fa fa-info-circle text-success"></i>
                    如：/usr/local/mysql
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">
                <span class="text-danger">*</span>
                启动命令：
            </label>
            <div class="col-sm-8">
                <input id="dstart_cmd" name="start_cmd" 
                       type="text" class="form-control" maxlength="200"
                       value="{% if form.start_cmd.value %}{{ form.start_cmd.value }}{% endif %}">
                <span class="help-block m-b-none">
                     <i class="fa fa-info-circle text-success"></i> 
                     如：/bin/bash /usr/local/mysql/bin/mysqld_safe --defaults-file=/etc/my_3306.cnf > /dev/null 2>&1 &
                </span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-3">
                <a href="{{ request.environ.HTTP_REFERER }}" 
                   type="button" class="btn btn-default">
                    <i class="fa fa-times"></i>
                    取消
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i>
                    保存
                </button>
            </div>
        </div>
    </form>
<section>
{% endblock %}

<!-- 添加该页面自己需要的 js 模板 -->
{% block js %}
    <script src="{% static 'js/content.min.js' %}"></script>
    <script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
    <script src="{% static 'js/plugins/bootstrapvalidator/bootstrapValidator.min.js' %}"></script>
    <script src="{% static 'js/plugins/bootstrapvalidator/language/zh_CN.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.min.js' %}"></script>

    <script>
        // 使用 Django csrf 功能
        $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});

        $(document).ready(function(){
            // 弹出OS信息 iframe
            $('#os_list').on('click', function(){
                layer.open({
                    type: 2,
                    title: 'iframe父子操作',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area : ['800px' , '520px'],
                    content: '{% url 'dbmp_mysql_instance_iframe_os_list' %}'
                });
            });

            // 表单验证
            $('#default_form').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    host: {
                        validators: {
                            notEmpty: {
                                message: '链接IP不能为空'
                            },
                            ip: {
                                message: '链接IP格式有误'
                            }
                        }
                    },
                    port: {
                        validators: {
                            notEmpty: {
                                message: '端口不能为空'
                            },
                            integer: {
                                message: '端口必须数字'
                            },
                            between: {
                                min: 1025,
                                max: 65535,
                                message: '端口必须在1025到65535之间'
                            }
                        }
                    },
                    username: {
                        message: '用户名验证失败',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 1,
                                max: 50,
                                message: '用户名长度必须在1到50位之间'
                            }
                        }
                    },
                    password: {
                        message: '密码验证失败',
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: '密码长度必须在6到200位之间'
                            }
                        }
                    },
                    remark: {
                        message: '备注验证失败',
                        validators: {
                            stringLength: {
                                max: 200,
                                message: '备注长度必须在0到200位之间'
                            }
                        }
                    },
                    my_cnf_path: {
                        message: '配置文件路径验证失败',
                        validators: {
                            notEmpty: {
                                message: '配置文件路径不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: '密码长度必须在6到200位之间'
                            }
                        }
                    },
                    base_dir: {
                        message: 'MySQL软件所在目录验证失败',
                        validators: {
                            notEmpty: {
                                message: 'MySQL软件所在目录不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: 'MySQL软件所在目录长度必须在6到200位之间'
                            }
                        }
                    },
                    start_cmd: {
                        message: 'MySQL实例启动命令验证失败',
                        validators: {
                            notEmpty: {
                                message: 'MySQL实例启动命令不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 200,
                                message: 'MySQL实例启动命令长度必须在6到200位之间'
                            }
                        }
                    }
                }
            }); //结束表单验证

        });
        
    </script>
{% endblock %}
